<!DOCTYPE html>
<html> 
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<meta content="telephone=no" name="format-detection" />
<title>test12</title> 
<link rel="stylesheet" href="../css/blueprint/screen.css" type="text/css" media="all"/>
<link rel="stylesheet" href="../css/rain.css" type="text/css" media="all"/>
<style type="text/css">  
body{font-size:12px;} 
/*折线图*/
#lineChartSVG-2 .area path{stroke-width: 2;}
.lineChart-areaLine {fill: none; stroke-width: 1;}
.lineChart-bubblewrap{stroke:#fff;}
.lineChart-bubble-label { fill: #fff; font-size: 12px;}
.lineChart-bubble-value { fill: #fff; font-size: 12px;} 
.lineChart-circle__highlighted { fill: #359ae0; stroke:#359ae0;}
.lineChart-gradientBackgroundArea-top { stop-color: #1f3d63;  stop-opacity: 0.4;}
.lineChart-gradientBackgroundArea-bottom { stop-color: #1f3d63; stop-opacity: 0.6;}
.gradientBg2-top { stop-color: #86383d;  stop-opacity: 1;}
.gradientBg2-bottom { stop-color: #86383d; stop-opacity: 0.1;} 

.lineChart-xAxisTicks .domain, .lineChart-xAxis .domain, .lineChart-yAxisTicks .domain { display: none;}
.lineChart-xAxis .tick line { display: none;}
.lineChart-xAxis .tick text{fill:#999;}
.lineChart-xAxisTicks .tick line, .lineChart-yAxisTicks .tick line {fill: none; stroke: #ccc; stroke-width: 1; }

.pieChart-center-innerCircle {fill: #fff;}
.pieChart-center-text { font-size: 28px;}
.pieChart-center-outerCircle {fill: rgba(255, 255, 255, 0.75);}
.pieChart-detail-divider {stroke: gray; stroke-width: 1;}
.pieChart-detail-percentage { font-size: 42px; font-weight: 100; fill: #333; stroke-width: 1px;}
.pieChart-detail-textContainer { background-color: transparent; padding: 10px 0 0 0; margin: 0; color: #666; font-style: italic;}
.pieChart-detail__left { text-align: left;}
.pieChart-detail__right { text-align: right;}
.pieChart__blue { fill: #6bb7c7;}
.pieChart__red { fill: #d79d91;}

.hidden { display: none;}
.tooltip {position:absolute;min-width:48px;	height:25px; padding:2px 2px 5px 2px;background-color:#fff; border:1px solid #666; color:#666; -webkit-border-radius:5px; -moz-border-radius:5px;
	border-radius:5px;	pointer-events:none;}
.tooltip b, .tooltip i {position: absolute;	left: 0;display: block;	font-family: Simsun;font-style: normal;}
.tooltip b {left: 20px;	bottom: -10px; color: #666;}
.r_angle{left:auto!important;right:5px!important;}
.tooltip b i {bottom: 1px;color: #fff;}

.pathAnima {
	fill:none;
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 1.595056250356918s ease-in-out 0s; 
}
.pathAnima2 { 
	fill:none;
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 1.595056250356918s ease-in-out 0s; 
}
.o-0{opacity:0;}
</style> 
</head>
<body class="body w-40 bg37">
	<div id="lineChart-1" class="posr pt-4">
		<svg id="lineChartSVG" class="lineChart-svg">
		  <defs>
		    <linearGradient id="lineChart-gradientBackgroundArea1" x1="0" x2="0" y1="0" y2="1">
		      <stop class="lineChart-gradientBackgroundArea1-top" offset="0%" />
		      <stop class="lineChart-gradientBackgroundArea1-bottom" offset="100%" />
		    </linearGradient>
            <clipPath id='graphs_clip_path'>
              <rect></rect>
            </clipPath>
		  </defs>
		</svg>
		<div id="tooltip-1" class="tooltip hide">
			<b>◆<i>◆</i></b>
			<p class="tac lh-1">当前值</p>
			<p class="tac lh-1 oh ptss"><span class="j_value"></span></p>
		</div>
	</div>
	
      <div id="lineChart" class="posr ml mr">
	<svg id="lineChartSVG" class="lineChart-svg">
	  <defs>
	    <linearGradient id="lineChart-gradientBackgroundArea" x1="0" x2="0" y1="0" y2="1">
	      <stop class="lineChart-gradientBackgroundArea-top" offset="0%" />
	      <stop class="lineChart-gradientBackgroundArea-bottom" offset="100%" />
	    </linearGradient>
	  </defs>
	</svg>
	<div id="tooltip" class="tooltip hide">
		<b class="r_angle">◆<i>◆</i></b>
		<p class="tac lh-1">当前值</p>
		<p class="tac lh-1 oh ptss"><span class="j_value"></span></p>
	</div>
      </div>
	
      <div id="lineChart-2" class="posr ml mr">
	<svg id="lineChartSVG-2" class="lineChart-svg">
	  <defs>
		<linearGradient id="gradientBg2"  x1="0%" y1="0%" x2="100%" y2="0%">
		  <stop class="gradientBg2-top" offset="0%" />
		  <stop class="gradientBg2-bottom" offset="100%" />
		</linearGradient>
	  </defs>
	</svg>
	<div id="tooltip-2" class="tooltip hide">
		<b class="r_angle">◆<i>◆</i></b>
		<p class="tac lh-1">当前值</p>
		<p class="tac lh-1 oh ptss"><span class="j_value"></span></p>
	</div>
      </div>
      <input type="button" value="动画" id="run" /> 
<script src="d3.v3.min.js"></script>
<script src="../js/jquery-1.7.2.js"></script>
<script src="../js/util.js"></script>  
<script src="main.js"></script>  
<script type="text/javascript">
var init = function(){
	$("#tooltip-1").css({'opacity':0});
	var lineChart =  [{ date: '2006-02-1',label: '支出',value: 44.55},{	date: '2006-03-1',label: '支出',value: 61.00},{date: '2006-04-1',label: '支出',
	value: 117},{date: '2006-05-1',label: '支出',value: 174.25},{date: '2006-06-1',label: '支出',value: 445.25},{date: '2006-07-1',	label: '支出',
	value: 88.48}];
	var temp1 = mobile.drawLineChart({
		elementId:'#lineChart-1',
		tooltipId:'#tooltip-1',
		width: $("#lineChart-1").width(),
		height:150, 
		data:lineChart,
		duration:1500,
		delay:500,
		xTicks: false,
		xTickstransX:10,//x轴线原点x坐标
		xTickstransY:150,//x轴线原点y坐标
		xTickamt:6,
		xTicksize:5,
		xflexline:true,
		xAxis: true,
		xAxisfill: "#999",
		activexAxisFill:"#fff",
		xAxisamt:6,
		xAxissize:-150,
		xAxisformat: d3.time.format('%m月'),
		yTicks: false,
		yTickamt:6,
		yTicksize: $("#lineChart-1").width(),
		yAxis: false,
		yAxisamt:5,
		yAxissize:5,
		radius:2,
		stroke:"#ff277e",
		fill:"#ff277e",
		cycleActive:true,//当前点是否激活
		activeFill:"#fff",//当前圆点颜色
		marginWidth: $('#tooltip-1').width()+8,
		area: false,
		areafill:"none",
		tipIndex:5,
		tipXDeviation: 0, //提示框偏差
		tipYDeviation: -5,
		showcurval: false,
		showtip:true
	}); 
	//折线图数据
	var lineChart1 = [{ date: '2006-02-1',label: '支出',value: 51.55},{	date: '2006-03-1',label: '支出',value: 61.02},{date: '2006-04-1',label: '支出',
		value: 47.22},{date: '2006-05-1',label: '支出',value: 74.25},{date: '2006-06-1',label: '支出',value: 245.88},{date: '2006-07-1',	label: '支出',
		value:  89.22}];
	//折线图
	var temp = mobile.drawLineChart({
		elementId:'#lineChart',
		tooltipId:'#tooltip',
		width: $("#lineChart").width(),
		height:150, 
		data:lineChart1,
		duration:1500,
		delay:500,
		xTicks: true,
		xTickstransX:15,
		xTickstransY:0,
		xTickamt:6,
		xTicksize:155,
		xAxis: true,
		xAxisfill: "#999",
		activexAxisFill:"#fff",
		xAxisamt:6,
		xAxissize:-150,
		xflexline: false,
		xAxisformat: d3.time.format('%m月'),
		yTicks: true,
		yTickamt:6,
		yTicksize: $("#lineChart").width(),
		yAxis: true,
		yAxisamt:5,
		yAxissize:5,
		radius:2,
		stroke:"#359be1",
		fill:"#359be1",
		cycleActive: false,
		activeFill:"#fff",
		marginWidth:30,
		area: true,
		areafill:"url(#lineChart-gradientBackgroundArea)",
		tipIndex:5,
		tipXDeviation: -parseInt($("#tooltip").width())+22,
		tipYDeviation: -parseInt($("#tooltip").height())-20,
		showcurval: false,
		showtip: true
	}); 
	//折线图数据
	var lineChart2 = [{ date: '2006-02-1',label: '支出',value: 51.55},{	date: '2006-03-1',label: '支出',value: 61.02},{date: '2006-04-1',label: '支出',
		value: 47.22},{date: '2006-05-1',label: '支出',value: 74.25},{date: '2006-06-1',label: '支出',value: 245.88},{date: '2006-07-1',	label: '支出',
		value:  89.22}];
	//折线图
	var temp2 = mobile.drawLineChart({
		elementId:'#lineChart-2',
		tooltipId:'#tooltip-2',
		width: $("#lineChart-2").width(),
		height:150, 
		data: lineChart2,
		duration:1500,
		delay:500,
		xTicks: true,
		xTickstransX:15,
		xTickstransY:0,
		xTickamt:6,
		xTicksize:155,
		xAxis: true,
		xAxisfill: "#999",
		activexAxisFill:"#fff",
		xAxisamt:6,
		xAxissize:-150,
		xflexline: false,
		xAxisformat: d3.time.format('%m月'),
		yTicks: true,
		yTickamt:6,
		yTicksize: $("#lineChart-2").width(),
		yAxis: true,
		yAxisamt:5,
		yAxissize:5,
		radius:3,
		stroke:"#ff5b59",
		strokeWidth: 2,
		fill:"#ff5b59",
		cycleActive: false,
		activeFill:"#ff5b59",
		marginWidth:30,
		area: true,
		areafill:"url(#gradientBg2)",
		tipIndex:5,
		tipXDeviation: -parseInt($("#tooltip-2").width())+22,
		tipYDeviation: -parseInt($("#tooltip-2").height())-20,
		showcurval: false,
		showtip: true
	}); 
}
init();
$("#run").on("click",function(){
	init();
});
</script>
</body>
</html>
